<template>
  <div>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success">
      <el-step title="店铺基础信息"></el-step>
      <el-step title="身份证信息"></el-step>
      <el-step title="营业执照"></el-step>
    </el-steps>
  </el-card>
  <merchantInfoDetail
    v-show="showStatus[0]"
    :merchantParam="merchantParam"
    :is-edit="isEdit"
    @nextStep="nextStep">
  </merchantInfoDetail>
  <merchant-identity-detail
    v-show="showStatus[1]"
    :merchantParam="merchantParam"
    :is-edit="isEdit"
    @nextStep="nextStep"
    @prevStep="prevStep"
    @finishCommit="finishCommit" >
  </merchant-identity-detail>

  <merchant-license-detail
    v-show="showStatus[2]"
    :merchantParam="merchantParam"
    :is-edit="isEdit"
    @prevStep="prevStep"
    @finishCommit="finishCommit" >
  </merchant-license-detail>

  </div>
</template>



<!--<el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->

<script>
  import merchantInfoDetail from "./merchantInfoDetail"
  import merchantIdentityDetail from "./merchantIdentityDetail"
  import merchantLicenseDetail from "./merchantLicenseDetail"
  const defaultMerchantParam = {
        shopkeeperName: "",//店主名称
        shopkeeperPhoneNumber: "",//店主手机号
        shopkeeperCardId: "",//店主身份证号
        bursePassword: "",//钱包密码
        burseBalance: "",//钱包余额
        cardCertificate: "",//身份证证件期效
        credCertificate: "",//身份证结束时间
        licenseCertifIcate: "", //营业执照期效
        licenseEndTime: "", //执照结束时间

        merchantLogoImg: "",//店铺头像
        merchantId: "",//店铺编号
        merchantName: "",//店铺名称
        merchantAccount: "",//店铺账号
        merchantPassword: "",//登录密码
        merchantNotice: "",//店铺公告
        merchantAddress: "",//店铺地址
        merchantDesc: "",//店铺描述
        merchantScore: "", //店铺评分
        merchantAttention: "",// 店铺关注数量
        merchantKindsId: "",//店铺主营类目编号
        merchantTypeId: "",//店铺类型编号
        checkAdminAccount: "",//审核人账号
        merchantSiteId: "",//店铺地址编号
        merchantStatusId:"",//店铺状态编号
        enterTime: "",//入驻时间

        merchantKeyword:"",//店铺关键字

        licenseImg: "",//店铺营业执照图片地址
        reverseCardImg: "",//店主身份证头像面图片地址
        siteCardImg: ""//身份证反面地址
    /*createBy:"",//创建人
    createTime: "",//创建时间
    updateBy: "",//更新人
    updateTime: "",//更新时间*/
  }
  export default {
    components: {merchantInfoDetail,merchantIdentityDetail,merchantLicenseDetail},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        active: 0,
        merchantParam: defaultMerchantParam,
        showStatus: [true, false, false]
      };
    },

    watch: {
      merchantParam:function(merchantParam){
         if(!this.isEdit)return;
         this.merchantParam=merchantParam;
      }

    },
    methods: {
      hideAll() {
        for (let i = 0; i < this.showStatus.length; i++) {
          this.showStatus[i] = false;
        }
      },
      prevStep() {
        if (this.active > 0 && this.active < this.showStatus.length) {
          this.active--;
          this.hideAll();
          this.showStatus[this.active] = true;
        }
      },
      nextStep() {
        console.log(defaultMerchantParam)
        if (this.active < this.showStatus.length - 1) {
          this.active++;
          this.hideAll();
          this.showStatus[this.active] = true;
        }
      },
      finishCommit(isEdit) {
        this.$confirm('是否要提交该信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("................."+this.merchantParam)
            this.$axios.post("http://localhost:8301/merchantAccount/addMerchant",{
              shopkeeperPhoneNumber: this.merchantParam.shopkeeperPhoneNumber,
              merchantName: this.merchantParam.merchantName,
              licenseImg: this.merchantParam.licenseImg,
              reverseCardImg: this.merchantParam.reverseCardImg,
              siteCardImg: this.merchantParam.siteCardImg,
              merchantKindsId: this.merchantParam.merchantKindsId,
              merchantTypeId: this.merchantParam.merchantTypeId
            }).then(resp => {
              this.$message({
                type: 'success',
                message: '提交成功',
                duration:1000
              });
              // location.reload();
            })

        })
      }
    }
  }
</script>
